<template>
  <div class="panel">
    <div class="head">
      <img src="@/assets/img/login-header.png" alt="" />
    </div>

    <div class="form">
      <img class="profile-avatar" src="@/assets/img/avatar.png" alt="" />
      <div class="content">
        <el-form
          show-message
          :model="loginData"
          ref="formRef"
          size="large"
          :rules="rules"
        >
          <el-form-item prop="name">
            <el-input
              v-model="loginData.name"
              clearable
              :prefix-icon="Avatar"
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginData.password"
              show-password
              :prefix-icon="Unlock"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="large"
              round
              class="submit-button"
              @click="loginBtn"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Avatar, Unlock } from '@element-plus/icons-vue'
import type { ElForm } from 'element-plus'
import useLoginStore from '@/stores/login/login'

const loginData = ref({
  name: 'peng',
  password: '123456'
})

const formRef = ref<InstanceType<typeof ElForm>>()
const rules = {
  name: [
    {
      required: true,
      message: '账号未填写',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '密码未填写',
      trigger: 'change'
    }
  ]
}

// 登录
const loginStore = useLoginStore()
const loginBtn = () => {
  formRef.value?.validate((valid) => {
    console.log(valid)
    if (valid) {
      loginStore.postLogin(loginData.value)
    } else {
      return false
    }
  })
}
</script>

<style lang="less" scoped>
.panel {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: white;
  .btnClick {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
  .head {
    background: #ccccff;
    img {
      display: block;
      width: 430px;
      margin: 0 auto;
      user-select: none;
    }
  }

  .form {
    width: 100%;
    position: relative;
    .profile-avatar {
      display: block;
      position: absolute;
      height: 100px;
      width: 100px;
      border-radius: 50%;
      border: 4px solid var(--ba-bg-color-overlay);
      top: -50px;
      right: calc(50% - 50px);
      z-index: 2;
      user-select: none;
    }
    .content {
      padding: 100px 40px 40px 40px;
    }
    .submit-button {
      width: 100%;
      letter-spacing: 2px;
      font-weight: 300;
      margin-top: 15px;
      --el-button-bg-color: var(--el-color-primary);
    }
  }
}
</style>
